簡介

Angular 是 Google 開發出來一款開源 JavaScript 框架，用來開發單一頁面應用程式（single page application, SPA）。目前已經到 Angular 10 版本，預計今年 11 月還會有 11 的版本釋出 ，第一版正名為 AngularJS ，而第 2 版後稱為 Angular。兩者架構差異很大，簡單來說 AngularJS 本身有些缺點，後來受到 React 的刺激後，Angular 便被開發出來與之抗衡。

Angular 採用 MVC 模式，涵蓋了 M、V、C/VM 等層面，不需要組合、評估其它技術就能完成大部分前端開發任務。這是因為她已經將各種技術封裝在框架中，隔離了瀏覽器的細節，讓你不用關心她的實現細節。此外所有需要使用的套件、模組 Angular 都已經幫你打包好了，不像是 React 或 Vue 要自己去架構模組。

引用內文

開發環境

• win10 64bit
• npm 6.12.1
• node.js v12.13.1
• Git 2.23.0.windows.1
• vscode 1.48.0 x64

安裝前準備

使用 Angular 開發會需要安裝以下軟體：

• Node.js
• Git
• Visual Studio Code

建立 Angular 專案

• 新增一個資料夾。
• 將路徑指向資料夾。
  cd F:/angular
• 透過 npm 安裝 Angular CLI，輸入：

npm i -g @angular/cli

MAC

OS 後來改版後，目前遇到的狀況是，第一次建立 CLI，新增一個資料夾，然後要將指令改成

sudo npm i -g @angular/cli

i 就是 install 的意思，-g 是全域 global 的意思。

安裝後會出現以下訊息，輸入 y，就可以完成安裝，目前安裝版本為 10.0.6。

確認是否安裝成功，輸入 ng -v 就會得到下方畫面，就代表安裝成功並告知我有什麼命令可以使用。

開發好用套件大補帖

可以在 VSCode 擴充套件工具欄位中搜尋 angular，並在前幾名可以看到 Will 保哥開發的好用 Angular Extension Pack 套件。

如果是全新手要找 Angular 的開發套件，推薦可以使用此大補帖，便可以安裝基本所需的套件喔!已經有 11 萬下載人次了呢!

建立專案骨架

在剛剛建立好的目錄資料夾中，輸入以下指令：

ng new index

index 為專案名稱，可自訂義。

輸入後會問兩個問題：

• 請問你想要新增 Angular Routor 嗎? Y
• 哪個 stylesheet 是你想要使用的？SCSS

CSS 我習慣用 SCSS 預處理器編譯。

這時候看到骨架已經完成，但程式還在安裝，原因是 npm 正在做 install 的動作，安裝之後要開發的元件。

在將資料夾放到 VScode 中，會看到專案已建立完成。

如何確認專案建置成功

因為剛剛我有新增專案名稱，所以要將路徑改成專案資料夾的名稱，

剛剛看起來都建置完成，但如果跑不起來也是白搭，所以透過以下指令測試：

npm start

輸入完後會自己跑 npm serve，這時候都不用做任何事情。

MAC

要先啟動 npm，所以要先跑 npm install

跑完後會出現這段問題，就輸入 y 即可，跑一下子會得到一個 localhost 的位置，已下圖為例是 localhost:4200，把這段複製到網頁上即可。

如果看到以下畫面，就代表建置成功了!!